<template>
  <div class="video-center">
    <div class="page-header">
      <h1 class="page-title">视频课件中心</h1>
      <div class="search-box">
        <el-input
          placeholder="搜索视频课件"
          prefix-icon="el-icon-search"
          v-model="searchQuery"
          @input="handleSearch">
        </el-input>
      </div>
    </div>

    <!-- 筛选区域 -->
    <el-card class="filter-container">
      <div class="filter-item">
        <span class="filter-label">分类:</span>
        <el-radio-group v-model="filter.category" @change="handleFilterChange">
          <el-radio-button label="">全部</el-radio-button>
          <el-radio-button label="science">科学</el-radio-button>
          <el-radio-button label="math">数学</el-radio-button>
          <el-radio-button label="language">语文</el-radio-button>
          <el-radio-button label="english">英语</el-radio-button>
          <el-radio-button label="programming">编程</el-radio-button>
        </el-radio-group>
      </div>
      
      <div class="filter-item">
        <span class="filter-label">时长:</span>
        <el-radio-group v-model="filter.duration" @change="handleFilterChange">
          <el-radio-button label="">全部</el-radio-button>
          <el-radio-button label="short">10分钟以内</el-radio-button>
          <el-radio-button label="medium">10-30分钟</el-radio-button>
          <el-radio-button label="long">30分钟以上</el-radio-button>
        </el-radio-group>
      </div>
    </el-card>

    <!-- 视频列表 -->
    <div class="video-list" v-loading="loading">
      <el-empty v-if="filteredVideoList.length === 0 && !loading" description="暂无相关视频课件"></el-empty>
      
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(video, index) in filteredVideoList" :key="index">
          <el-card class="video-card" shadow="hover" @click.native="viewVideoDetail(video.id)">
            <div class="video-cover">
              <img :src="video.coverUrl" :alt="video.title">
              <div class="video-duration">{{ formatDuration(video.duration) }}</div>
              <div class="play-icon">
                <i class="el-icon-video-play"></i>
              </div>
            </div>
            <div class="video-info">
              <h3 class="video-title">{{ video.title }}</h3>
              <div class="video-meta">
                <span><i class="el-icon-user"></i> {{ video.author }}</span>
                <span><i class="el-icon-view"></i> {{ video.views }}</span>
              </div>
              <div class="video-category">
                <el-tag size="small" type="info">{{ getCategoryName(video.category) }}</el-tag>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 分页 -->
    <div class="pagination-container" v-if="total > 0">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VideoCenter',
  
  data() {
    return {
      loading: false,
      searchQuery: '',
      currentPage: 1,
      pageSize: 12,
      total: 0,
      videoList: [],
      filter: {
        category: '',
        duration: ''
      }
    }
  },
  
  computed: {
    filteredVideoList() {
      return this.videoList
    }
  },
  
  created() {
    this.fetchVideoList()
  },
  
  methods: {
    async fetchVideoList() {
      try {
        this.loading = true
        // 这里替换为实际的API调用
        // const response = await this.$api.video.getVideoList({
        //   page: this.currentPage,
        //   pageSize: this.pageSize,
        //   search: this.searchQuery,
        //   category: this.filter.category,
        //   duration: this.filter.duration
        // })
        
        // 模拟数据
        setTimeout(() => {
          this.videoList = [
            {
              id: 1,
              title: 'JavaScript基础教程 - 变量与数据类型',
              coverUrl: 'https://via.placeholder.com/300x200?text=JavaScript',
              author: '张老师',
              views: 1256,
              duration: 1200, // 秒
              category: 'programming'
            },
            {
              id: 2,
              title: '高中数学函数与导数详解',
              coverUrl: 'https://via.placeholder.com/300x200?text=Math',
              author: '李老师',
              views: 892,
              duration: 2400, // 秒
              category: 'math'
            },
            {
              id: 3,
              title: '英语口语训练 - 日常对话',
              coverUrl: 'https://via.placeholder.com/300x200?text=English',
              author: '王老师',
              views: 1520,
              duration: 1800, // 秒
              category: 'english'
            },
            {
              id: 4,
              title: '物理力学基础 - 牛顿定律',
              coverUrl: 'https://via.placeholder.com/300x200?text=Physics',
              author: '赵老师',
              views: 745,
              duration: 1500, // 秒
              category: 'science'
            },
            {
              id: 5,
              title: '现代文学赏析 - 鲁迅作品',
              coverUrl: 'https://via.placeholder.com/300x200?text=Literature',
              author: '刘老师',
              views: 628,
              duration: 3600, // 秒
              category: 'language'
            },
            {
              id: 6,
              title: 'Python数据分析入门',
              coverUrl: 'https://via.placeholder.com/300x200?text=Python',
              author: '陈老师',
              views: 1476,
              duration: 2700, // 秒
              category: 'programming'
            },
            {
              id: 7,
              title: '化学实验安全指南',
              coverUrl: 'https://via.placeholder.com/300x200?text=Chemistry',
              author: '周老师',
              views: 532,
              duration: 900, // 秒
              category: 'science'
            },
            {
              id: 8,
              title: '历史解析 - 近代中国',
              coverUrl: 'https://via.placeholder.com/300x200?text=History',
              author: '吴老师',
              views: 876,
              duration: 3200, // 秒
              category: 'language'
            }
          ]
          this.total = 32 // 模拟总数
          this.loading = false
        }, 500)
      } catch (error) {
        this.$message.error('获取视频课件列表失败')
        this.loading = false
      }
    },
    
    handleSearch() {
      this.currentPage = 1
      this.fetchVideoList()
    },
    
    handleFilterChange() {
      this.currentPage = 1
      this.fetchVideoList()
    },
    
    handleCurrentChange(page) {
      this.fetchVideoList()
    },
    
    viewVideoDetail(id) {
      this.$router.push(`/video-center/${id}`)
    },
    
    getCategoryName(category) {
      const categoryMap = {
        'science': '科学',
        'math': '数学',
        'language': '语文',
        'english': '英语',
        'programming': '编程'
      }
      return categoryMap[category] || category
    },
    
    formatDuration(seconds) {
      const minutes = Math.floor(seconds / 60)
      const remainingSeconds = seconds % 60
      return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
    }
  }
}
</script>

<style lang="scss" scoped>
.video-center {
  padding: 20px;
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .page-title {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
    
    .search-box {
      width: 300px;
    }
  }
  
  .filter-container {
    margin-bottom: 20px;
    
    .filter-item {
      margin-bottom: 15px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .filter-label {
        display: inline-block;
        width: 60px;
        font-weight: bold;
      }
    }
  }
  
  .video-list {
    margin-bottom: 20px;
    min-height: 300px;
    
    .video-card {
      margin-bottom: 20px;
      cursor: pointer;
      transition: transform 0.3s;
      
      &:hover {
        transform: translateY(-5px);
        
        .play-icon {
          opacity: 1;
        }
      }
      
      .video-cover {
        position: relative;
        height: 150px;
        overflow: hidden;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        .video-duration {
          position: absolute;
          bottom: 10px;
          right: 10px;
          padding: 2px 8px;
          background-color: rgba(0, 0, 0, 0.6);
          color: #fff;
          border-radius: 4px;
          font-size: 12px;
        }
        
        .play-icon {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: rgba(0, 0, 0, 0.3);
          opacity: 0;
          transition: opacity 0.3s;
          
          i {
            font-size: 48px;
            color: #fff;
          }
        }
      }
      
      .video-info {
        padding: 10px;
        
        .video-title {
          margin: 0 0 10px;
          font-size: 16px;
          height: 44px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        
        .video-meta {
          display: flex;
          justify-content: space-between;
          color: #909399;
          font-size: 13px;
          margin-bottom: 10px;
          
          i {
            margin-right: 4px;
          }
        }
      }
    }
  }
  
  .pagination-container {
    text-align: center;
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  .video-center {
    .page-header {
      flex-direction: column;
      align-items: flex-start;
      
      .page-title {
        margin-bottom: 15px;
      }
      
      .search-box {
        width: 100%;
      }
    }
    
    .filter-container {
      .filter-item {
        .el-radio-group {
          margin-top: 10px;
        }
      }
    }
  }
}
</style> 